{extend name="layout/layout" /}


{block name="style"}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
	<style>

		.detail{
			font-size: 14px;
		}

		.info{
			background: #fff;
			padding: 10px;
		}

		.content img{
			max-width: 100%;
			max-height: 100%;
		}

		.opear{
			height: 50px;
			background: #fff;
			border-top: 1px solid #eee;
			line-height: 50px;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
		}

		.cart{
			background: #f0ad4e;
			color:#fff;
		}

		.buy{
			background: #e60012;
			color:#fff;
		}

		.info .price{
			color:#e60012;
		}

		.sale-info{
			margin-top: 8px;
			padding: 10px;
			color:#8f8f94;
			background: #fff;
		}

		.sale-info .sale-title{
			padding-bottom: 5px;
		}
		.sale-detail>div{
			border-right: 1px solid #ccc;
		}

		.sale-detail>div:nth-child(3){
			border: none;
		}

		.favorite{
			line-height: 20px;
			padding-top: 5px;
		}
		.favorite .iconfont{
			font-size: 20px;
		}

		.favorite p{
			margin-bottom: 0;
			font-size:12px;
		}

		.mask{
			background: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}

		.mask .mask-container{
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 100;
			background: #fff;
		}

		.mask .mask-container .mask-submit{
			background: #e60012;
			color:#fff;
			text-align: center;
			height: 45px;
			line-height: 45px;
		}

		.mask .mask-goods{
			padding: 10px 120px 10px;
			border-bottom: 1px solid #eee;
			min-height: 90px;
		}
		.mask .goods-img{
			top:-20px;
			left: 10px;
			position: absolute;
			width: 100px;
			height: 100px;
		}

		.mask .mask-spec{
			padding: 20px 10px;
			max-height: 300px;
			overflow-y: scroll;
			border-bottom: 1px solid #eee;
		}

		.mask .mask-spec .spec-title{
			padding: 10px 0;
		}

		.mask .spec-itme{
			padding: 5px 15px;
			background: #ccc;
			color:#333;
			border-radius: 5px;
			margin-right: 10px;
		}

		.mask .spec-itme.active{
			background: #e60012;
			color:#eee;
		}

		.mask .close{
			position: absolute;
			right: 10px;
			top:10px;
		}

		.mask .close .mui-icon{
			font-size: 30px;
		}

		.mask .number{
			padding: 15px;
		}

		.mask .number-container{
			border: 1px solid #ddd;
			border-radius: 4px;
		}

		.mask input{
			margin: 0;
			padding: 0 10px;
			height: 35px;
			border:none;
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;
			width: 50px;
			text-align: center;
			font-size: 12px;
		}

		.mask .push, .mask .less{
			width: 35px;
			height: 35px;
			line-height: 35px;
			text-align: center;
		}

		.mask .number-tips{
			line-height: 35px;
		}

		.content{
			padding: 10px;
			margin-top: 10px;
			background: #fff;
		}
		.content img{
			font-size: 0;
			display: block;
		}

	</style>
{/block}



{block name="main"}
	<div class="detail" v-cloak>

		

		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" v-for="ban in detail.goods_gallery_urls">
		        	<img :src="ban" class="img-responsive" />
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		</div>

		<div class="info">
			<div class="name">{{detail.goods_name}}</div>
			<p class="">
				<b class="price">券后价：￥{{(detail.min_group_price-detail.coupon_discount)/100}}</b>
				<del class="">￥{{detail.min_group_price/100}}</del>
				<span class="mui-pull-right">销量：<span class="text-theme">{{detail.sold_quantity}}</span></span>
			</p>
			<div class="business_name">{{detail.mall_name}}</div>
		</div>


		<p class="content mui-text-center" v-html="detail.goods_desc"></p>


		<div class="opear mui-row mui-text-center">
			<div class="buy" @tap="exchange()">立即换{{detail.coupon_discount/100}}元券</div>	
		</div>


	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	<script>
		var detailVue = new Vue({
			el: '.detail',
			data: {
				detail: {
					spec:[]
				},
				id: "{$goods_id}",
			},
			mounted: function(){
				this.getDetail();
			},
			methods:{
				//获取商品详情
				getDetail: function(){
					layer.open({
						type: 2,
						shadeClose: false,
					});
					var that = this;
					var id = this.id;
					var url =  'pdd/goodsDetail';
					request(that, {'url': url, 'data': {'goods_id':id}}, function(res){
						console.log(res);
						if(res.code == 200) {
							layer.closeAll();
							that.detail = res.data;
							that.bannerSwiper();
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//兑换
				exchange: function(){
					layer.open({
						type: 2,
						shadeClose: false,
					});
					var that = this;
					var id = this.id;
					var url =  'pdd/exchange';
					request(that, {'url': url, 'data': {'goods_id':id}}, function(res){
						console.log(res);
						if(res.code == 200) {
							location.href = res.data.mobile_short_url;
						} else {
							layer.closeAll();
							mui.toast(res.msg);
						}	
					});
				},
				//图片轮播
				bannerSwiper:function(){
                    var bannerSwiper = new Swiper('.swiper-container', {
                        observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
    					pagination: {
						    el: '.swiper-pagination',
						},
                    });
                },
			}
		});
	</script>
{/block}